<template>
    <div class="box">
        <button class="filter" @click="changefilter('all')">全部</button>
        <button class="filter" @click="changefilter('done')">已完成</button>
        <button class="filter" @click="changefilter('not')">未完成</button>
    </div>
    </template>
<script setup>

import {defineEmits} from 'vue'

const emit = defineEmits(['changeFilter'])
const changefilter = (type) => {
    emit('changeFilter', type)
}
</script>
<style scoped>
.box {
    margin: 20px 0;
}
.filter {
    padding: 5px 10px;
    background-color: #fff;
    cursor: pointer;
    border: none;
}
</style>